<template>
  <a-form :data="form" auto-label-width>
    <a-form-item field="mobile">
      <a-input class="input" v-model="form.mobile" placeholder="请输入手机号" />
    </a-form-item>
    <a-form-item field="password">
      <a-input-password class="input" v-model="form.password" placeholder="请输入密码" />
    </a-form-item>
    <a-form-item>
      <a-button class="btn" type="primary" @click="formLogin">登录</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const form = reactive({
  mobile: '18384845460',
  password: '123456'
})

const formLogin = async () => {
  await userStore.login({ mobile: form.mobile, password: form.password })
}
</script>

<style scoped lang="scss">
.input {
  height: 40px;
}
.btn {
  height: 40px;
  width: 100%;
}
</style>
